<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Nav</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <script>
      class PageOne extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page One</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content class="ion-padding">
            <h1>Page One</h1>
            <ion-button href="#/two/segment">Go to Page Two</ion-button>
            <ion-button href="#/page-3">Go to Page Three</ion-button>
            <ion-button href="#/page-4.1/foo">Go to Page 4 (foo)</ion-button>
          </ion-content>
        `;
        }
      }
      class PageTwo extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page Two</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content class="ion-padding">
            <h1>Page Two</h1>
            <div>
              <ion-nav-link router-direction="forward" component="page-three">
                <ion-button href="#/page-3">Go to Page Three</ion-button>
              </ion-nav-link>
            </div>
          </ion-content>
        `;
        }
      }
      class PageThree extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page Three</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content class="ion-padding">
            <h1>Page Three</h1>
          </ion-content>
        `;
        }
      }
      class PageFour extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page Four</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content class="ion-padding">
            <h1>text = ${this.text}</h1>
            <ion-button href="#/page-4.2/bar">Go to Page 4 (bar)</ion-button>
          </ion-content>
        `;
        }
      }
      customElements.define('page-one', PageOne);
      customElements.define('page-two', PageTwo);
      customElements.define('page-three', PageThree);
      customElements.define('page-four', PageFour);
    </script>
  </head>

  <body>
    <ion-app>
      <ion-router>
        <ion-route url="/" component="page-one"> </ion-route>
        <ion-route url="/two/:param" component="page-two"> </ion-route>
        <ion-route url="/page-3" component="page-three"> </ion-route>
        <ion-route url="/page-4.1/:text" component="page-four"> </ion-route>
        <ion-route url="/page-4.2/:text" component="page-four"> </ion-route>
      </ion-router>

      <ion-split-pane content-id="main">
        <ion-menu content-id="main">
          <ion-header>
            <ion-toolbar>
              <ion-title>Menu</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content>
            <ion-item href="#/">
              <ion-label>Page 1</ion-label>
            </ion-item>
            <ion-item href="#/two/segment">
              <ion-label>Page 2</ion-label>
            </ion-item>
            <ion-item href="#/page-3">
              <ion-label>Page 3</ion-label>
            </ion-item>
            <ion-item href="#/page-4.1/foo">
              <ion-label>Page 4 (foo)</ion-label>
            </ion-item>
            <ion-item href="#/page-4.2/bar">
              <ion-label>Page 4 (bar)</ion-label>
            </ion-item>
          </ion-content>
        </ion-menu>
        <ion-router-outlet id="main"></ion-router-outlet>
      </ion-split-pane>
    </ion-app>
  </body>

  <script>
    document.querySelector('ion-route[component=page-three]').componentProps = { param: 'route' };
  </script>
</html>
